@import "../../sassmixins/mixins";

html {
  @include square(100%);
  //overflow: hidden;
}

body {
  height: 100%;
  width: 10rem;
  .outer {
    font-size: 1rem;
    background-image: url("../image/bg.jpg");
    background-size: 100% 100%;
    min-height: 100%;
    overflow: hidden;
    width: 10em;
    min-width: 10rem;
    position: relative;
    .container {
      background-image: url("../image/all.png");
      background-size: 100% 100%;
      @include size(px2em(750px), px2em(1206px));
      @include center-block;
      position: relative;

      .buycart {
        background-image: url("../image/buycart-no.png");
        background-size: 100% 100%;
        @include size(px2em(429px), px2em(402px));
        position: absolute;
        top: px2em(461px);
        left: px2em(210px);

        &.b-1 {
          background-image: url("../image/buycart-1.png");
        }

        &.b-2 {
          background-image: url("../image/buycart-2.png");
        }

        &.b-3 {
          background-image: url("../image/buycart-3.png");
        }

        &.b-4 {
          background-image: url("../image/buycart-4.png");
        }

        &.b-5 {
          background-image: url("../image/buycart-5.png");
        }

        &.b-6 {
          background-image: url("../image/buycart-6.png");
        }

        &.b-7 {
          background-image: url("../image/buycart-7.png");
        }
      }

      .rule {
        background-image: url("../image/rule-icon.png");
        background-size: 100% 100%;
        @include size(px2em(185px), px2em(166px));
        position: absolute;
        top: 0;
        left: 0;
      }

      .user-info {
        position: absolute;
        top: px2em(352px);
        width: 10em;
        transform: rotate(-8deg);
        -webkit-transform: rotate(-8deg);

        > div {
          font-size: px2em(28px);
          color: #ffffff;
          line-height: 1.4;
          text-align: center;
          img {
            width: 2.5em;
            vertical-align: middle;
          }

          span {
            color: #f4ff00;
            border-bottom: 1px solid #f4ff00;
            padding-bottom: 0.2em;
          }
        }
      }

      .next {
        background-image: url("../image/next.png");
        background-size: 100% 100%;
        @include size(px2em(378px), px2em(91px));
        position: absolute;
        left: px2em(196px);
        bottom: px2em(25px);
      }

      .zan {
        position: absolute;
        top: px2em(903px);
        @include square(px2em(158px));
        &.z-1 {
          left: px2em(83px);
        }

        &.z-2 {
          left: px2em(288px);
        }

        &.z-3 {
          left: px2em(493px);
          .num {
            top: px2em(30px);
          }
          .info {
            top: px2em(30px);
          }
        }

        .num {
          position: absolute;
          top: px2em(34px);
          left: px2em(45px);
          width: px2em(40px);
          text-align: center;

          span {
            font-size: px2em(24px);
            color: #ffffff;
            line-height: 1;
            display: block;
            text-align: center;
          }
        }

        .info {
          position: absolute;
          top: px2em(34px);
          width: px2em(70px);
          text-align: center;
          left: px2em(100px);
          white-space: nowrap;

          span {
            font-size: px2em(24px);
            color: #ffffff;
            line-height: 1;
            display: block;
            text-align: center;
          }
        }
      }
    }
  }
}